import React, {useRef, useState} from 'react';
import {message, Card, Upload, Button, UploadProps, Form} from 'antd';
import {useRequest} from "@@/plugin-request/request";
import {merchantList, uploadAccount} from "@/services/bz/api";
import {
  ProForm, ProFormInstance,
  ProFormSelect, ProFormUploadButton,
} from '@ant-design/pro-components';
import {UploadOutlined} from "@ant-design/icons";


const handleChange = (value: string) => {
  console.log(`selected ${value}`);
};

export default () => {
  const [merchantData, setMerchantData] = useState([]);
  const [fileList, setFileList] = useState([]);
  const ref = useRef<ProFormInstance>();

  useRequest(merchantList, {
    onSuccess: (res) => {
      let data = [];
      //将拿到的返回值遍历
      res.list.map(item => {
        data.push({
          label: item.merchantCode,
          value: item.merchantCode
        })
      });
      setMerchantData(data);
      console.log("===", merchantData)
    },
  });
  const props: UploadProps = {
    name: 'file',
    maxCount: 1,
    headers: {
      authorization: 'authorization-text',
    },
    onRemove: () => {
      setFileList([])
    },
    fileList,
    beforeUpload: file => {
      console.log(file)
      const files = []
      files.push(file)
      setFileList(files)

      return false;
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log("====", fileList, info.file.status)
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} file uploaded successfully`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  return (
    <div>
      <Card hidden={true}>
      <a style={{marginTop: "50px"}} href={"http://149.129.135.223:9101/account/white/list"}>下载白名单</a>
      </Card>
      <Card>

        <ProForm
          formRef={ref}
          onFinish={async (values) => {
            console.log("===", values.merchantCode)
            if (values.merchantCode == undefined) {
              message.error('请选择商户');
              return
            }
            if (fileList[0] == undefined) {
              message.error('请上传文件');
              return
            }
            const formData = new FormData();
            formData.append('file', fileList[0]);
            formData.append('merchantCode', values.merchantCode);
            await uploadAccount(formData).then((response) => {
              message.success(response.data);
              setFileList([])
              ref.current?.resetFields()
            })

          }}
          request={async (data) => {
            console.log("====", data)
            return {};
          }}
        >
          <ProFormSelect
            options={merchantData}
            style={{width: 150}}
            onChange={handleChange}
            width="xs"
            name="merchantCode"
            label="选择商户"
          />
          <Form.Item>
            <Upload {...props} style={{marginBottom: "50px"}}>
              <Button icon={<UploadOutlined/>}>上传文件</Button>
            </Upload>
          </Form.Item>

        </ProForm>

      </Card>
    </div>

  )
}
